<template>
  <template v-for="item in menus" :key="item.id" >
    <el-sub-menu v-if="item.children && item.children.length" :index="item.url || item.id + ''">
      <template #title>
        <span>{{ item.menuName }}</span>
      </template>
      <!-- 递归渲染子菜单 -->
      <MenuTree :menus="item.children" />
    </el-sub-menu>
    <el-menu-item v-else :index="item.url" >
      {{ item.menuName }}
    </el-menu-item>
  </template>
</template>

<script setup>
defineProps({
  menus: {
    type: Array,
    required: true
  }
})
</script>